<template>
  <van-form @submit="onSubmit" class="form">
    <template v-if="isAccount">
      <van-field
        v-model="loginInfo.account"
        name="account"
        label="账号"
        placeholder="账号"
        :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
        v-model="loginInfo.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </template>
    <template v-else>
      <van-field
        v-model="loginInfo_email.userEmail"
        clearable
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ pattern: patternReg.email, message: '请填写邮箱' }]"
      >1
        <template #button>
          <countDown :content="'发送验证码'" :reg="patternReg.email" :seconds="60" :waitVerifyContext="loginInfo_email.userEmail" @sendSomething="sendEmailVerify" />
        </template>
      </van-field>
      <van-field
        v-model="loginInfo_email.password"
        type="text"
        name="authCode"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
    </template>
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>

    <div class="toggle-way" @click="toggleWayHandle">
      <span class="way">{{ isAccount ? "账号" : "邮箱" }}</span
      >登录
    </div>
  </van-form>
</template>

<script>
import { mapMutations } from "vuex";
import { doLogin, doLoginForEmail, verifyEmail } from '@/api/userApi';
import countDown from "./utils/count-down.vue";
export default {
  components: {
    countDown
  },
  props: {
    account: {
      type: String,
      default: "",
    },
    email: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loginInfo: {
        account: this.account,
        password: "",
      },
      loginInfo_email: {
        userEmail: this.email,
        password: "",
      },
      isAccount: true, // 是账号登录
      patternReg: {
        email:
          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      },
    };
  },
  methods: {
    ...mapMutations("m_user", ["changeHavingLogin", "setUserInfo"]),
    async onSubmit(values) {
      // let { data: res } = await this.$http.post(
      //   "/restaurant-user/user/login",
      //   values
      // );
      let res = {
        code: 0
      }
      if(this.isAccount) {
        // 账号登录
        res = await doLogin(values);
      } else {
        // 邮箱登录
        res = await doLoginForEmail(values);
      }
      if (res.code === 200) {
        // 存储用户登录信息到vuex中
        // jwt加密存入localStorage中 token
        // 跳转到个人详情
        this.$notify({
          type: "success",
          message: "登录成功",
        });
        this.setUserInfo(res.data);
        let token = this.$jwt.sign(res.data, this.$appConfig.jwt_secret, {
          expiresIn: "1day",
        });
        localStorage.setItem("token", token);
        this.changeHavingLogin(true);
      } else {
        this.$notify({
          type: "danger",
          message: res.message,
        });
      }
    },
    back() {
      this.$emit("backMy");
    },
    toggleWayHandle() {
      this.isAccount = !this.isAccount;
    },
    async sendEmailVerify(email) {
      if (email && this.patternReg.email.test(email)) {
        let messageObj = {
            type: "danger",
            message: "验证码发送失败",
        };
        try {
          let res = await verifyEmail(email);
          if (res.code === 200 && res.data) {
            messageObj = {
              type: "success",
              message: "验证码发送成功",
            };
          }
        } catch (error) {
        }
        this.$notify(messageObj);
      } else {
        this.$notify({
          type: 'danger',
          message: '请正确填写邮箱'
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.toggle-way {
  width: 30%;
  padding: 5px 20px;
  background: rgba(0, 0, 0, 0.6);
  margin: 0 auto;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-size: 12px;
}
// .form {
//   background-color: rgba(255, 255, 255, 0.3);
//   padding: 20px;
//   border-radius: 10px;

//   .van-field {
//     background-color: rgba(255, 255, 255, 0.7);
//     border-radius: 10px;
//     margin-bottom: 10px;
//   }

//   .van-button {
//     margin: 0 auto;
//     width: 70%;
//   }
// }
</style>
